import React from 'react';
import {Avatar, Breadcrumb, Dropdown, Space, Layout, Menu} from "antd";
import {Link} from "react-router-dom";
import {HomeOutlined, SmileOutlined} from "@ant-design/icons";
import {useSelectorAuth} from "@/store/slice/auth";
const {Header} = Layout;
const menu = (
    <Menu
        items={[
            {
                key: '1',
                label: (
                    <Link to={"/"}>
                        返回首页
                    </Link>
                ),
                icon: <HomeOutlined />,
            },
            {
                key: '2',
                label: (
                    <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
                        退出登陆
                    </a>
                ),
                icon: <SmileOutlined />,
            }
        ]}
    />
);
function IndexHeader() {
    const auth = useSelectorAuth();
    return (
        <Header className="site-layout-background" style={{padding: 0}}>
            <Breadcrumb style={{margin: '16px 0'}}>
                <Breadcrumb.Item>User</Breadcrumb.Item>
                <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>

            <Space>
                <span>欢迎回来{auth.info.name}!</span>
                <Dropdown overlay={menu}>
                    <a onClick={e => e.preventDefault()}>
                        <Avatar src={auth.info.avatar} />
                    </a>
                </Dropdown>
            </Space>

        </Header>
    );
}

export default IndexHeader;